<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Treemap</title>
<style>

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div>
<script>

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 2000 - margin.right - margin.left,
    height = 3000 - margin.top - margin.bottom;
    
var i = 0,
    duration = 750,
    root;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("/GeoLocation/treedata", function(error, flare) {
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;
  //alert(root);
  function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }

  root.children.forEach(collapse);
  update(root);
});

d3.select(self.frameElement).style("height", "1500px");





function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click);

  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { 
    	  if (d._children == null) 
        	  return "#fff";
          if(d._children.length>50) 
    		  return "#FF0000";//red
          else if(d._children.length>10)
        	  return "#FF8000";//orange
          else if(d._children.length>5)
        	  return "#FFFF00";//yellow
        else 
      	  return "lightsteelblue";});

  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) {
    	  
    	  if (d._children == null) 
        	  return "#fff";
          if(d._children.length>50) 
    		  return "#FF0000";//red
          else if(d._children.length>10)
        	  return "#FF8000";//orange
          else if(d._children.length>5)
        	  return "#FFFF00";//yellow
        else 
      	  return "lightsteelblue"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("circle")
      .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
  
}


//Toggle children on click.
function click(d) {
if (d.children) {
 d._children = d.children;
 d.children = null;
} else {
 d.children = d._children;
 d._children = null;
}
update(d);
}

</script>
</div>
<script>
function doit(){
if (!window.print){
alert("You need NS4.x to use this print button!");
return
}
window.print();
}
</script>
<div style="float:right;">
<a href="javascript:doit()" style="font-size:100%;font-family:verdana;">Print or Save</a>
</div>

<table style="font-family:verdana;font-size:80%">
<tr align="left"><th>Legend: </th></tr>
<tr>
<td>
<svg height="50" width="50" style="float:left;">
  <circle cx="25" cy="25" r="4.5" stroke="steelblue" stroke-width="1.5px" fill="#fff" />
  Sorry, your browser does not support inline SVG.  
</svg> 

<div style="float:left;"><p>: No sub domain</p></div>
</td>
</tr>

<tr>
<td>
<svg height="50" width="50" style="float:left;">
  <circle cx="25" cy="25" r="4.5" stroke="steelblue" stroke-width="1.5px" fill="lightsteelblue" />
  Sorry, your browser does not support inline SVG.  
</svg> 

<div style="float:left;"><p>: Only one sub domain</p></div>
</td>
</tr>

<tr>
<td>
<svg height="50" width="50" style="float:left;">
  <circle cx="25" cy="25" r="4.5" stroke="steelblue" stroke-width="1.5px" fill="#FFFF00" />
  Sorry, your browser does not support inline SVG.  
</svg> 

<div style="float:left;" ><p>: More than 5 sub domain</p></div>
</td>
</tr>

<tr>
<td>
<svg height="50" width="50" style="float:left;">
  <circle cx="25" cy="25" r="4.5" stroke="steelblue" stroke-width="1.5px" fill="#FF8000" />
  Sorry, your browser does not support inline SVG.  
</svg> 
<div style="float:left;"><p >: More than 10 sub domain</p></div>
</td>
</tr>

<tr>
<td >
<svg height="50" width="50" style="float:left;">
  <circle cx="25" cy="25" r="4.5" stroke="steelblue" stroke-width="1.5px" fill="#FF0000" />
  Sorry, your browser does not support inline SVG.  
</svg> 
<div style="float:left;" ><p >: More than 50 sub domain</p></div>
</td>
</tr>


</table>


</body>
</html>